<template>
    <div>
        <video 
        ref="videoPlayer" 
        class="video-js vjs-custom-skin vjs-big-play-centered" 
        controls
        preload="auto" 
        fluid=true>
            <source :src="videoSrc" />
        </video>
    </div>
</template>
  
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

export default {
    name: 'VideoPlayer',
    props: {
        videoSrc: String,
        videoImg:String
    },
    data() {
        return {
            player: null,
            playerOptions: {
                // 倍数按钮
                playbackRates: [0.5, 1.0, 1.5, 2.0]
            }
        }
    },
    mounted() {
        // 设置封面
        const img = this.videoImg.substring(this.videoImg.length - 4)
        if(img != 'null'){
            this.playerOptions.poster = this.videoImg
        }
        // 创建视频播放器
        this.player = videojs(this.$refs.videoPlayer, this.playerOptions);
    },
    beforeDestroy() {
        // 销毁视频播放器
        if (this.player) {
            this.player.dispose();
        }
    },
};
</script>
<style>
/* 暂停时显示暂停按钮 */
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block;
}
/* 按钮样式 */
.video-js:hover .vjs-big-play-button, .vjs-custom-skin > .video-js .vjs-big-play-button:focus, .vjs-custom-skin > .video-js .vjs-big-play-button:active {
    background-color: rgba(36,131,213,0.9);
}
.vjs-custom-skin > .vjs-big-play-button {
    background-color: rgba(0,0,0,0.45);
    font-size: 3.5em;
    height: 2em !important;
    line-height: 2em !important;
    margin-top: -1em !important;
}
/* 显示当前播放时间 */
.video-js .vjs-current-time {
    display: block !important;
}
/* 隐藏剩余时间 */
.video-js .vjs-remaining-time {
    display: none !important;
}
/* 控制条样式 */
.vjs-custom-skin> .vjs-control-bar {
    color: #ffffff;
    font-size: 14px;
}

</style>